"use client"

import qs from "query-string"
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle
} from "@/components/ui/dialog"
import { useModal } from "@/hooks/use-modal-store"
import { ServerWithMemberWithProfiles } from "@/types";
import { ScrollArea } from "@/components/ui/scroll-area";
import { UserAvatar } from "@/components/user-avatar";
import { Check, Gavel, Loader2, MoreVertical, Shield, ShieldAlert, ShieldCheck, ShieldQuestion } from "lucide-react";
import { useState } from "react";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuPortal,
    DropdownMenuSeparator,
    DropdownMenuSub,
    DropdownMenuSubContent,
    DropdownMenuTrigger,
    DropdownMenuSubTrigger
} from "@/components/ui/dropdown-menu"
import { MemberRole } from "@prisma/client";
import axios from "axios";
import { useRouter } from "next/navigation";

const roleIconMap = {
    "GUEST": null,
    "MODERATOR": <ShieldCheck className="h-4 w-4 ml-2 text-indigo-500"></ShieldCheck>,
    "ADMIN": <ShieldAlert className="h-4 w-4 text-rose-500"></ShieldAlert>
}

export const MembersModal = () => {
    const router = useRouter();
    const {onOpen, isOpen, onClose, type, data} = useModal();
    const [loadingId, setLoadingId] = useState("");

    const isModalOpen = isOpen && type === "members";
    const { server } = data as {server : ServerWithMemberWithProfiles};

    const onKick = async (memberId:string) => {
        try {
            setLoadingId(memberId);
            const url = qs.stringifyUrl({
                url: `/api/members/${memberId}`,
                query: {
                    serverId: server?.id,
                }
            })
            console.log("url: "  + url)
            const response = await axios.delete(url)
            console.log(response)
            router.refresh()
            onOpen("members", {server: response.data})

        } catch(error) {
            console.log(error)
        } finally {
            setLoadingId("")
        }
    }

    const onRoleChange = async (memberId: string, role: MemberRole)=> {
        try {
            console.log(memberId, role)
            setLoadingId(memberId)
            const url = qs.stringifyUrl({
                url: `/api/members/${memberId}`,
                query: {
                    serverId: server?.id,
                    memberId,
                }
            })
            console.log("url: ", url)
            const response = await axios.patch(url, {role});
            console.log(response)
            router.refresh();
            onOpen("members", {server: response.data})
        } catch(error) {
            console.log(error)
        } finally {
            setLoadingId("");
        }
    }

    return (
        <Dialog open={isModalOpen} onOpenChange={onClose}>
            <DialogContent className="bg-white text-black overflow-hidden">
                <DialogHeader className="pt-8 px-6">
                    <DialogTitle className="text-2xl text-center font-bold">
                        Manage Members
                    </DialogTitle>
                    <DialogDescription
                        className="text-center text-zinc-500">
                        {server?.members.length} Members
                    </DialogDescription>
                </DialogHeader>
                <ScrollArea className="mt-8 max-h-[420px] pr-6">
                    {server?.members?.map((m) => (
                        <div key={m.id} className="flex items-center gap-x-2 mb-6">
                            <UserAvatar src={m.profile.imageUrl}></UserAvatar>
                            <div className="flex flex-col gap-y-1">
                                <div className="text-xs font-semibold flex items-center gap-x-1">
                                    {m.profile.name}
                                    {roleIconMap[m.role]}
                                </div>
                                <p className="text-xs text-zinc-500">
                                    {m.profile.email} 
                                </p>
                            </div>
                            {server.profileId !== m.profileId && loadingId != m.id && (
                                <div className="ml-auto">
                                    <DropdownMenu>
                                        <DropdownMenuTrigger>
                                            <MoreVertical className="h-4 w-4 text-zinc-500"></MoreVertical>
                                        </DropdownMenuTrigger>
                                        <DropdownMenuContent side="left">
                                            <DropdownMenuSub>
                                                <DropdownMenuSubTrigger
                                                    className="flex items-center">
                                                        <ShieldQuestion
                                                         className="w-4 h-4 mr-2"></ShieldQuestion>
                                                         <span>Role</span>
                                                    </DropdownMenuSubTrigger>
                                                    <DropdownMenuPortal>
                                                        <DropdownMenuSubContent>
                                                            <DropdownMenuItem onClick={()=>onRoleChange(m.id, "GUEST")}>
                                                                <Shield className="h-4 w-2 mr-2"></Shield>
                                                                Guest
                                                                {m.role == "GUEST" && (
                                                                    <Check className="h-4 2-4 ml-auto"></Check>
                                                                )}
                                                            </DropdownMenuItem>

                                                            <DropdownMenuItem onClick={()=>onRoleChange(m.id, "MODERATOR")}>
                                                                <ShieldCheck className="h-4 w-2 mr-2"></ShieldCheck>
                                                                Moderator
                                                                {m.role == "MODERATOR" && (
                                                                    <Check className="h-4 2-4 ml-auto"></Check>
                                                                )}
                                                            </DropdownMenuItem>

                                                        </DropdownMenuSubContent>
                                                    </DropdownMenuPortal>
                                            </DropdownMenuSub>
                                            <DropdownMenuSeparator></DropdownMenuSeparator>
                                            <DropdownMenuItem onClick={()=>onKick(m.id)}>
                                                <Gavel className="h-4 w-4 mr-2"></Gavel>
                                                Kick
                                            </DropdownMenuItem>
                                        </DropdownMenuContent>
                                    </DropdownMenu>
                                </div>
                            )}
                            {loadingId === m.id && (
                                <Loader2 className="animate-spin text-zinc-500 ml-auto w-4 h-4"></Loader2>
                            )}
                        </div>
                    ))}
                </ScrollArea>
            </DialogContent>
        </Dialog>
    )
}

export default MembersModal;